<template>
	<div class="!overflow-y-auto layout-padding">
		<el-collapse v-model="activeNames">
			<el-collapse-item name="1">
				<template #title>
					<span class="pl-4 text-lg font-semibold text-primary">单位信息设置</span>
				</template>
				<div class="px-6">
					<el-form :model="form.alarmPop" v-loading="loading" label-width="140px" class="mb20">
						<el-form-item label="平台名称" prop="alarmPopRange">
							<el-input />
						</el-form-item>
						<el-form-item label="单位名称" prop="alarmPopRange">
							<el-input />
							<p class="text-danger">如您需要修改单位名称，请联系上级单位修改</p>
						</el-form-item>
						<el-form-item label="单位地址" prop="alarmPopRange">
							<el-input />
						</el-form-item>
						<el-form-item label="单位电话" prop="alarmPopRange">
							<el-input />
						</el-form-item>
						<el-form-item label="负责人" prop="alarmPopRange">
							<el-input />
						</el-form-item>
					</el-form>
					<div class="flex justify-center">
						<el-button type="primary" @click="submit(form.alarmPop)">保存</el-button>
					</div>
				</div>
			</el-collapse-item>
			<el-collapse-item name="2">
				<template #title>
					<span class="pl-4 text-lg font-semibold text-primary">安装点名称设置</span>
				</template>
				<div class="px-6">
					<div class="px-[220px] mb20">
						<el-alert type="warning" show-icon :closable="false">
							资费提示：“ 建筑物+楼层+安装点名称 ”请尽量控制在25个字以内，否则可能会因为名称过长而产生2条短信付费。
						</el-alert>
					</div>
					<el-form :model="form.mapMode" v-loading="loading" label-width="220px" class="mt-6">
						<el-form-item label="安装点名称设置" prop="userClustersPlaceFormat" class="mb20">
							<template #label>
								<div>
									<div class="text-right">安装点名称设置</div>
									<div class="text-xs text-right text-danger">（弹窗、短信、公众号、报警记录）</div>
								</div>
							</template>
							<el-checkbox-group v-model="form.placeFormat.userClustersPlaceFormat" class="w100">
								<el-checkbox label="10"> 建筑物名称 </el-checkbox>
								<el-checkbox label="20"> 楼层名称 </el-checkbox>
								<el-checkbox label="30" disabled> 安装点名称 </el-checkbox>
							</el-checkbox-group>
							<p>显示结果: 深圳市华源科技创新园B1区 2楼 212会议室</p>
						</el-form-item>
						<el-form-item label="安装点名称设置：（设备列表）" prop="userClustersPlaceFormat">
							<template #label>
								<div>
									<div class="text-right">安装点名称设置</div>
									<div class="text-xs text-right text-danger">（设备列表）</div>
								</div>
							</template>
							<el-checkbox-group v-model="form.placeFormat.userClustersPlaceFormat" class="w100">
								<el-checkbox label="10"> 建筑物名称 </el-checkbox>
								<el-checkbox label="20"> 楼层名称 </el-checkbox>
								<el-checkbox label="30" disabled> 安装点名称 </el-checkbox>
							</el-checkbox-group>
							<p>平台显示结果: 深圳市华源科技创新园B1区 2楼 212会议室</p>
						</el-form-item>
					</el-form>
					<div class="flex justify-center mt-4">
						<el-button type="primary" @click="submit(form.mapMode)">保存</el-button>
					</div>
				</div>
			</el-collapse-item>
			<el-collapse-item name="3">
				<template #title>
					<span class="pl-4 text-lg font-semibold text-primary">设备类型显示设置</span>
				</template>
				<div class="px-6 py-2">
					<el-form :model="form.placeFormat" v-loading="loading" label-width="140px" class="mb20">
						<el-form-item label="显示格式：" prop="userClustersPlaceFormat">
							<div class="flex items-center">
								<el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
								<el-button type="success" class="ml-4" size="small" @click="handleResetPlaceFormatChecks">恢复原选</el-button>
							</div>
							<el-checkbox-group v-model="form.placeFormat.userClustersPlaceFormat" @change="handleCheckedPlaceFormatChange">
								<el-checkbox v-for="item in deviceTypeConfig.deviceTypes" :key="item.id" :label="item.id"> {{ item.name }} </el-checkbox>
							</el-checkbox-group>
						</el-form-item>
					</el-form>
					<div class="flex justify-center">
						<el-button type="primary" @click="submit(form.placeFormat, 'userClustersPlaceFormat')">保存</el-button>
					</div>
				</div>
			</el-collapse-item>
			<el-collapse-item name="4">
				<template #title>
					<span class="pl-4 text-lg font-semibold text-primary">报警语音设置</span>
				</template>
				<div class="px-6">
					<el-form :model="form.placeBuilding" v-loading="loading" label-width="140px" class="mb20">
						<el-form-item label="语言类型" prop="userClustersPlaceBuilding">
							<el-radio-group v-model="form.placeBuilding.userClustersPlaceBuilding">
								<el-radio :label="10">无</el-radio>
								<el-radio :label="20">火警</el-radio>
								<el-radio :label="30">110</el-radio>
								<el-radio :label="40">警报声1</el-radio>
								<el-radio :label="50">警报声2</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-form>
					<div class="flex justify-center">
						<el-button type="primary" @click="submit(form.placeBuilding)">保存</el-button>
					</div>
				</div>
			</el-collapse-item>
			<el-collapse-item name="5">
				<template #title>
					<span class="pl-4 text-lg font-semibold text-primary">出库前是否需要先在平台完成测试</span>
				</template>
				<div class="px-6">
					<el-form :model="form.login" v-loading="loading" label-width="140px" class="mb20">
						<div class="px-[140px] mb20">
							<el-alert type="info" show-icon :closable="false">
								<span>默认为需要测试后方可出库，如果您的设备不需要测试即可出库（简易出库），取消即可。</span>
							</el-alert>
						</div>
						<el-form-item label="是否需要测试" prop="loginVerificationCode">
							<el-switch
								v-model="form.login.loginVerificationCode"
								inline-prompt
								active-text="是"
								inactive-text="否"
								:active-value="20"
								:inactive-value="10"
							/>
						</el-form-item>
					</el-form>
					<div class="flex justify-center">
						<el-button type="primary" @click="submit(form.login)">保存</el-button>
					</div>
				</div>
			</el-collapse-item>
		</el-collapse>
	</div>
</template>

<script setup lang="ts" name="systemBasicPersonalSettings">
import { cloneDeep } from 'lodash';
import { useMessage } from '/@/hooks/message';
import { getObj, addOrUpdate } from '/@/api/platform/basicPersonalSettings';
import { deviceTypeConfig } from './data';
const activeNames = ref(['5']);
const loading = ref(false);
const checkAll = ref(false);
const isIndeterminate = ref(true);
const form = reactive({
	alarmPop: {
		alarmPopRange: 10,
	},
	mapMode: {
		mapModeSelection: 10,
		centerPointLatitude: null,
		centerPointLongitude: null,
		mapLevel: null,
	},
	placeFormat: {
		userClustersPlaceFormat: deviceTypeConfig.selectType.split(',').map((d) => Number(d)),
	},
	placeBuilding: {
		userClustersPlaceBuilding: null,
	},
	login: {
		loginVerificationCode: 20,
	},
	loginValidity: {
		loginValidityPeriod: null,
	},
	wechat: {
		wechatBindingStatus: 10,
	},
});
// 恢复原选
const handleResetPlaceFormatChecks = () => {
	form.placeFormat.userClustersPlaceFormat = deviceTypeConfig.selectType.split(',').map((d) => Number(d));
	handleCheckedPlaceFormatChange(form.placeFormat.userClustersPlaceFormat);
};
// 全选
const handleCheckAllChange = (val: boolean) => {
	form.placeFormat.userClustersPlaceFormat = val ? deviceTypeConfig.deviceTypes.map((d) => d.id) : [];
	isIndeterminate.value = false;
};
// 单个选中
const handleCheckedPlaceFormatChange = (value: string[]) => {
	const checkedCount = value.length;
	checkAll.value = checkedCount === deviceTypeConfig.deviceTypes.length;
	isIndeterminate.value = checkedCount > 0 && checkedCount < deviceTypeConfig.deviceTypes.length;
};
const getData = () => {
	getObj().then((res) => {
		form.alarmPop.alarmPopRange = res.data?.alarmPopRange;
		form.placeFormat.userClustersPlaceFormat = res.data?.userClustersPlaceFormat?.split(',') || [];
		form.placeBuilding.userClustersPlaceBuilding = res.data?.userClustersPlaceBuilding;
		form.login.loginVerificationCode = res.data?.loginVerificationCode;
		form.loginValidity.loginValidityPeriod = Number(res.data?.loginValidityPeriod);
		form.wechat.wechatBindingStatus = res.data?.wechatBindingStatus;
		Object.assign(form.mapMode, {
			mapModeSelection: res.data?.mapModeSelection,
			centerPointLatitude: res.data?.centerPointLatitude,
			centerPointLongitude: res.data?.centerPointLongitude,
			mapLevel: res.data?.mapLevel,
		});
	});
};
getData();
// 提交
const submit = async (params, paramsTypeToString?) => {
	try {
		loading.value = true;
		const pars = cloneDeep(params);
		if (paramsTypeToString) {
			pars[paramsTypeToString] = pars[paramsTypeToString].join(',');
		}
		await addOrUpdate(pars);
		useMessage().success('修改成功');
		getData();
	} catch (err: any) {
		useMessage().error(err.msg);
	} finally {
		loading.value = false;
	}
};
</script>
<style lang="scss" scoped>
:deep(.el-collapse) {
	border-bottom: unset;
	border-top: unset;
}
:deep(.el-collapse-item) {
	box-shadow: var(--el-box-shadow-light);
	border-left: 1px solid var(--el-border-color);
	border-right: 1px solid var(--el-border-color);
	margin-bottom: 20px;
	border-radius: 8px;
	overflow: hidden;
}
</style>
